<template>
  <div class="appeal-container">
    <el-card class="appeal-card">
      <h2 class="title">提交申诉</h2>
      <el-form
          ref="appealFormRef"
          :model="appealForm"
          :rules="rules"
          label-width="80px"
          class="appeal-form"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input
              v-model="appealForm.username"
              placeholder="请输入您的帐号"
              clearable
          ></el-input>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input
              v-model="appealForm.email"
              placeholder="请输入您的邮箱"
              clearable
          ></el-input>
        </el-form-item>

        <!-- 申诉原因 -->
        <el-form-item label="申诉原因" prop="reason">
          <el-input
              v-model="appealForm.reason"
              type="textarea"
              :rows="4"
              placeholder="请详细描述您的问题或申诉原因"
              maxlength="500"
              show-word-limit
          ></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
              type="primary"
              :loading="submitting"
              @click="submitAppeal"
              class="submit-btn">
            提交申诉
          </el-button>
          <p  class="appeal-link" @click="toLogin">返回登陆页面</p>

        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref} from "vue";
import {useRouter} from "vue-router";
import { ElMessage } from "element-plus";
import request from "@/utils/request";
const router=useRouter();
const toLogin = () => {
  router.push("/login");
};
// 表单数据模型
const appealForm = reactive({
  username: "",
  email: "",
  reason: "",
  material: ""
});

// 表单引用
const appealFormRef = ref();

// 提交状态
const submitting = ref(false);

// 校验规则
const rules = {
  username: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
  ],
  email: [
    { required: true, message: "邮箱不能为空", trigger: "blur" },
    { type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"] }
  ],
  reason: [
    { required: true, message: "申诉原因不能为空", trigger: "blur" },
    { min: 10, max: 500, message: "申诉原因长度应在10到500个字符之间", trigger: "blur" }
  ]
};

// 提交申诉
const submitAppeal = async () => {
  // 校验表单
  try {
    await appealFormRef.value.validate();
  } catch (error) {
    ElMessage.error("表单填写有误，请检查后再提交");
    return;
  }

  // 开始提交
  submitting.value = true;

  try {
    // 调用后端接口
    const response = await request.post("/api/appeal/save", appealForm);

    if (response.data.code === 200) {
      ElMessage.success("申诉提交成功！,审核周期一为6h,请耐心等待");
      // 清空表单
      Object.assign(appealForm, { username: "", email: "", reason: "" });
    } else {
      ElMessage.error(response.data.message || "申诉提交失败，请稍后再试");
    }
  } catch (error) {

  } finally {
    submitting.value = false;
  }
};
</script>
<style scoped>
.appeal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.appeal-card {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.appeal-form {
  margin-top: 20px;
}

.submit-btn {
  width: 100%;
}
p{
  font-size: small;
  color: #9e9797;
  text-decoration: underline;
}
</style>
